import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  ScrollView,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native'

import NavBar from '../../../components/PublicHeader';
import AsyncStorage from '@react-native-community/async-storage';
// import getStorageValue from '../../../utils/getStorageValue';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import Layer from '../../../utils/Layer';
import { Constant } from '../../../public/js/constant';
import {
  LOGOUT_DELETE_TOKEN
} from '../../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class setup extends Component {
  constructor(props) {
    super(props)
    this.state = {
      setupList: [
        {
          name: '账号与安全',
          url: 'security'
        },
        // {
        //   name: '隐私设置',
        //   url: 'privacy'
        // },
        // {
        //   name: '通用设置',
        //   url: 'GeneralSettings'
        // },
        // {
        //   name: '消息通知',
        //   url: 'notification'
        // },
        // {
        //   name: '',
        //   url: 'aboutJX'
        // },
      ],
      currency: ['聊天背景', '背景视频', '储存空间', '清空聊天记录'],
      phone: this.props.navigation.state.params.phone
    }
  }

  componentDidMount = () => {
    console.log(this.state.phone);
  }
  // 处理 重复点击
  repeatPress = () => {
    const T = Date.now()
    if (!this.lastClickTime ||
      Math.abs(this.lastClickTime - T) > 2000) {
      this.lastClickTime = T
      // 退出登录
      this.logOut()
    }
  }

  // 退出当前账号
  async logOut() {
    const res = await fetchWebApi(LOGOUT_DELETE_TOKEN, {}, 'POST');
    if (res.status == 200) {
      // 清除token
      await AsyncStorage.removeItem(Constant.TOKEN);
      // 跳转登录页
      this.props.navigation.navigate("Accountlogin")
      // 弹窗提示
      Layer.showMsg("退出成功");
    } else {
      // 弹窗提示
      Layer.showMsg("退出失败,请稍后再试");
    }
  }


  render() {
    return (
      <View style={styles.warper}>
        <NavBar
          navigation={this.props.navigation}
          title={"设置"}
        />
        <ScrollView style={styles.bodys}>
          {/* 设置选项循环 */}
          {
            this.state.setupList.map((item, index) => {
              return (
                <View style={styles.bodys_view} key={index}>
                  <TouchableOpacity onPress={() => {
                    index == 2 ? this.props.navigation.navigate(item.url, {
                      currency: this.state.currency,
                      Generalsettingss: [
                        {
                          name: '聊天背景',
                          url: 'backgroundSettings'
                        },
                        {
                          name: '背景视频',
                          url: 'Backgroundvideo'
                        },
                        {
                          name: '储存空间',
                          url: 'Storagespace'
                        }
                      ],
                    }) : this.props.navigation.navigate(item.url, { phone: this.state.phone })
                  }} style={styles.lists}>
                    <Text style={styles.lists_text}>{item.name}</Text>
                    <Image source={require('../../../assets/images/maillist/Vector.png')} />
                  </TouchableOpacity>
                </View>
              )
            })
          }
          {/* 退出登录按钮 */}
          <TouchableOpacity style={styles.setup_button}
            onPress={() => {
              this.repeatPress()
            }}
          >
            <Text style={styles.button_text}>退出当前账号</Text>
          </TouchableOpacity>
        </ScrollView >
      </View >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  bodys: {
    marginTop: 10
  },
  bodys_view: {
    backgroundColor: "#fff",
    paddingLeft: 15,
    paddingRight: 15
  },
  lists: {
    height: 55,
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: 'space-between',
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2'
  },
  lists_text: {
    fontSize: 16
  },
  setup_button: {
    height: 55,
    backgroundColor: '#fff',
    marginTop: 20,
    justifyContent: "center",
    alignItems: "center"
    // padding: 20
  },
  button_text: {
    alignSelf: 'center',
    fontSize: 16
  }
})